<template>
  <div class="mine">

      <ul>
          <li v-for="(item, index) in allTodos" :key="index">
              <input v-model="item.done" type="checkbox" @click="toggleTodo(item)" ><span :class="{'done' : item.done}">{{item.text}}</span>
          </li>
      </ul>
  </div>
</template>

<style lang="less">
  
  .done {
      text-decoration: line-through;
  }

</style>

<script>
import request from '../../unit/js/request.js';
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
      return {
        
      }
  },
  computed: {
    ...mapGetters([
        'allTodos',
        'doneTodos',
        'noDoneTodos'
    ])
  },
  methods: {
      ...mapActions([
          'addTodo',
          'deleteTodo',
          'toggleTodo'
      ])
  },
  mounted() {
    request()
  }
}
</script>
